<template>
  <div class="container">
    <!-- 用户管理-用户信息 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox" size="medium" @submit.native.prevent>
      <el-form-item label="用户编号：">
        <el-input v-model.trim="search.meterID" placeholder="请输入用户编号" @keyup.enter.native="getUserByUserID" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getUserByUserID">查询</el-button>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" icon="el-icon-plus" @click="isAddUser=true;addUserVisible=true">新增用户</el-button>
      </el-form-item> -->

      <el-form-item class="fr">
        <el-button type="success" icon="el-icon-s-promotion"
          @click="clearFormInfo();isAddUser=true;addUserQuicklyVisible=true;">快速开户
        </el-button>
      </el-form-item>
      <div class="clear"></div>
    </el-form>
    <!-- /查询条件 -->
    <!-- <div class="mb20"></div> -->
    <div class="sanfan-detailBox">
      <div class="hd">
        <span class="title">用户信息</span>
        <span class="fr">
          <el-button type="primary" size="mini" @click="update(1)">修改</el-button>
          <el-button type="primary" size="mini" @click="update(2)">过户</el-button>
          <el-button v-if="currentObj.status==1" type="warning" size="mini" @click="update(3)">报停</el-button>
          <el-button v-if="currentObj.status==0" type="success" size="mini" @click="update(4)">重新启用</el-button>
          <el-button type="danger" size="mini" @click="update(5)">销户</el-button>
        </span>
        <div class="clear"></div>
      </div>
      <div class="bd">
        <table class="detailTable">
          <tr>
            <td>
              <label class="label">用户姓名：</label>{{currentObj.name}}
            </td>
            <td>
              <label class="label">用户状态：</label><span v-if="currentObj.status==1">正常</span><span
                v-if="currentObj.status==0" class="fc-red">停用</span><span v-if="currentObj.status==-1"
                class="fc-red">注销</span>
            </td>
            <td>
              <label class="label">用户ID：</label>{{currentObj.userID}}
            </td>

          </tr>
          <tr>
            <td>
              <label class="label">别名：</label>{{currentObj.aliasName}}
            </td>
            <td>
              <label class="label">人口数：</label>{{currentObj.peopleNum}}
            </td>
            <td>
              <label class="label">微信号：</label>{{currentObj.wechatID}}
            </td>
          </tr>
          <tr>
            <td>
              <label class="label">联系方式：</label>{{currentObj.phone}}
            </td>
            <td>
              <label class="label">联系方式2：</label>{{currentObj.phoneA}}
            </td>
            <td>
              <label class="label">联系方式3：</label>{{currentObj.phoneB}}
            </td>
          </tr>
          <tr>
            <td>
              <label class="label">所属册号：</label>{{currentObj.volumeName}}
            </td>
            <td>
              <label class="label">小区：</label>{{currentObj.villageName}}
            </td>
            <td>
              <label class="label">详细地址：</label>{{currentObj.villageDetail}}
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <label class="label">备注：</label>{{currentObj.mk}}
            </td>
          </tr>
        </table>



      </div>

      <div class="hd">
        <span class="title">
          营业信息
        </span>
        <!-- <span class="fr">
          <el-button type="primary" size="mini" @click="update">修改</el-button>
        </span> -->
        <div class="clear"></div>
      </div>
      <div class="bd">
        <table class="detailTable">
          <tr>
            <td>
              <label class="label">欠费状态：</label><span v-if="currentObj.meterUserStatus==0">正常</span><span
                v-if="currentObj.meterUserStatus==1" class="fc-red">欠费</span>
            </td>
            <td>
              <label class="label">行业类型：</label>{{currentObj.tradeTypeName}}
            </td>

          </tr>
          <tr>
            <td>
              <label class="label">用水类型：</label>{{currentObj.waterRateName}}
            </td>
            <td>
              <label class="label">抄表周期：</label>{{currentObj.meterReadCycleName}}
            </td>
            <td>
              <label class="label">缴费类型：</label>{{currentObj.costTypeName}}
            </td>
          </tr>
          <tr>
            <td>
              <label class="label">预存金额：</label>{{currentObj.depositMoney}} 元
            </td>
            <td>
              <label class="label">预存水量：</label>{{currentObj.depositWater}} 吨
            </td>
            <td>
              <label class="label">总计用水量：</label>{{currentObj.totalUse}} 吨

            </td>
          </tr>
          <tr>
            <td>
              <label class="label">合同编号：</label>{{currentObj.contractID}}
            </td>
            <td colspan="2">
              <label class="label">合同名：</label>{{currentObj.fileName}}
            </td>
          </tr>

        </table>
      </div>

      <div class="hd">
        <span class="title">设备信息</span>
        <span class="fr">
          <el-button type="warning" size="mini" @click="update(6)">换表</el-button>
          <el-button type="danger" size="mini" @click="update(7)">水表变更</el-button>
        </span>
        <div class="clear"></div>
      </div>
      <div class="bd" style="border:0">
        <PagesTable :tableHeader="tableHeader" :tableData="tableData" :tableOperation="tableOperation"
          :tablePagination="tablePagination" :isIndex="true" />
      </div>

      <div class="hd">
        <span class="title">用水类型</span>
        <span class="fr">
          <!-- <el-button type="primary" size="mini" @click="update">修改</el-button> -->
        </span>
        <div class="clear"></div>
      </div>
      <div class="bd">
        <table class="detailTable">
          <tr>
            <td>
              <label class="label">用水类型：</label>{{currentObj.waterRateName}}
            </td>
            <td>
              <label class="label">基础水价：</label>{{currentWaterInfo.price}} 元
            </td>
            <td>
              <label class="label">启用阶梯水价：</label>{{currentWaterInfo.isLadder>2?"是":"否"}}
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="fl">
                <label class="label">代收费：</label>
              </div>
              <div class="fl ">
                <p><span class="fc-gray">污水费</span> {{currentWaterInfo.effluentFee}}</p>
                <p><span class="fc-gray">水资源税</span> {{currentWaterInfo.tax}}</p>
                <p><span class="fc-gray">其他</span> {{currentWaterInfo.otherFee}}</p>
              </div>
            </td>
          </tr>
        </table>
      </div>

    </div>

    <!-- 新增 -->
    <el-dialog :title="isAddUser?'添加用户':'修改用户'" :visible.sync="addUserVisible" width="90%">
      <el-steps :active="stepActive" align-center class="mb20" process-status="finish">
        <el-step title="用户资料"></el-step>
        <el-step title="基础信息"></el-step>
        <el-step title="水表信息"></el-step>
      </el-steps>
      <div class="mb20">&nbsp;</div>
      <el-form :model="userForm" ref="userForm" label-width="140px" class="sanfan-form" :inline="true">
        <div v-if="stepActive==0" class="form_div">
          <!-- 用户信息 -->
          <el-form-item label="用户姓名：" prop="name" :rules="[{required: true, message: '姓名不能为空', trigger: 'blur'}]">
            <el-input v-model="userForm.name" placeholder="请输入用户姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="用户状态：" class="must">
            <el-select v-model="userForm.status" placeholder="请选择状态">
              <el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="别名：">
            <el-input v-model="userForm.aliasName" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="phone" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur'}]">
            <el-input v-model.number="userForm.phone" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系方式2：">
            <el-input v-model.number="userForm.phoneA" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系方式3：">
            <el-input v-model.number="userForm.phoneB" clearable></el-input>
          </el-form-item>
          <el-form-item label="人口数：">
            <el-input v-model.number="userForm.peopleNum" type="number" min="1" clearable></el-input>
          </el-form-item>

          <el-form-item label="微信号：">
            <el-input v-model="userForm.wechatID" clearable></el-input>
          </el-form-item>
          <el-form-item label="所属册号：" prop="volumeID" :rules="[{ required: true, message: '请选择册号', trigger: 'change'}]">
            <el-select v-model="userForm.volumeID" filterable placeholder="请选择册号">
              <el-option v-for="item in volumeList" :key="item.volumeID" :label="item.volumeName"
                :value="item.volumeID">
              </el-option>
            </el-select>
          </el-form-item>
          <br>
          <el-form-item label="小区：" prop="villageID" :rules="[{ required: true, message: '请选择小区', trigger: 'change'}]">
            <el-select v-model="userForm.villageID" filterable :filter-method="villageFilter" placeholder="请输入查询选择小区">
              <el-option v-for="item in userAddrList" :key="item.villageID" :label="item.villageName"
                :value="item.villageID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址：" prop="villageDetail"
            :rules="[{ required: true, message: '详细地址不能为空', trigger: 'blur'}]">
            <el-input v-model="userForm.villageDetail" placeholder="详细地址，如x单元x号" clearable></el-input>
          </el-form-item>
        </div>
        <div v-if="stepActive==1" class="form_div">
          <!-- 基础信息 -->
          <el-form-item label="户表类型：" class="must">
            <el-select v-model="userForm.userMeterTypeID" placeholder="请选择户表类型" @change="changeUserMeterType"
              @focus="focusUserMeterType">
              <el-option v-for="(item,index) in userMeterTypeList" :key="index" :label="item.userMeterTypeName"
                :disabled="userMeterTypeDisabled" :value="item.userMeterTypeID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用水类型：" class="must">
            <el-select v-model="userForm.waterRateID" placeholder="请选择用水类型" :disabled="userForm.userMeterTypeID==3">
              <el-option v-for="(item,index) in waterRateList" :key="index" :label="item.waterRateName"
                :value="item.waterRateID" :disabled="userForm.userMeterTypeID!=3&&item.waterRateID==0">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行业类型：" class="must">
            <el-select v-model="userForm.tradeTypeID" placeholder="请选择行业类型">
              <el-option v-for="(item,index) in tradeTypeList" :key="index" :label="item.tradeTypeName"
                :value="item.tradeTypeID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="抄表周期：" class="must">
            <el-select v-model="userForm.meterReadCycleID" placeholder="请选择抄表周期">
              <el-option v-for="(item,index) in cycleAmountList" :key="index" :label="item.meterReadCycleName"
                :value="item.meterReadCycleID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缴费类型：" class="must">
            <el-select v-model="userForm.costTypeID" placeholder="请选择缴费类型">
              <el-option v-for="(item,index) in costTypeList" :key="index" :label="item.costTypeName"
                :value="item.costTypeID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="余额：" prop="depositMoney" :rules="[{required: true, message: '余额不能为空', trigger: 'blur'}]">
            <el-input v-model="userForm.depositMoney" clearable></el-input>
          </el-form-item>
          <el-form-item label="总计用水量：" prop="totalUse"
            :rules="[{required: true, message: '总计用水量不能为空', trigger: 'blur'}]">
            <el-input v-model="userForm.totalUse" clearable></el-input>
          </el-form-item>
          <!-- 其他信息 -->

          <el-form-item label="合同名：">
            <el-input v-model="userForm.fileName" clearable></el-input>
          </el-form-item>
          <el-form-item label="合同编号：">
            <el-input v-model="userForm.contractID" clearable></el-input>
          </el-form-item>
          <div></div>
          <el-form-item label="备注：">
            <el-input v-model="userForm.mk" type="textarea" style="width:590px" clearable></el-input>
          </el-form-item>

        </div>
        <div v-if="stepActive==2" class="sanfan-tablePage">
          <!-- 水表信息 -->


          <el-table class="sanfan-table" :data="userForm.meters" style="width: 100%;">
            <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
            <el-table-column label="抄表类型" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.meterReadTypeID" placeholder="请选择" size="mini"
                  :disabled="scope.$index>0&&userForm.userMeterTypeID==3"
                  @change="changeCurrReadingValue(scope.row.meterReadTypeID,scope.$index)">
                  <el-option v-for="(item,index) in typeAmountList" :key="index" :label="item.meterReadTypeName"
                    :value="item.meterReadTypeID">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="用水类型" align="center" v-if="userForm.userMeterTypeID==3">
              <template slot-scope="scope">
                <el-select v-model="scope.row.waterRateID" placeholder="请选择用水类型" size="mini"
                  :disabled="scope.$index==0">
                  <el-option v-for="(item,index) in waterRateList" :key="index" :label="item.waterRateName"
                    :value="item.waterRateID" :disabled="item.waterRateID==0">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="设备类型" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.meterTypeID" placeholder="请选择设备类型" size="mini">
                  <el-option v-for="(item,index) in devTypeList" :key="index" :label="item.meterTypeName"
                    :value="item.meterTypeID"
                    :disabled="item.meterTypeID==0&&userForm.userMeterTypeID!=3||userForm.userMeterTypeID==3&&item.meterTypeID!=0&&scope.$index!=0||userForm.userMeterTypeID==3&&item.meterTypeID==0">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="设备编号（远传表）" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sn" size="mini" v-if="scope.row.meterTypeID==2"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="水表口径" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.caliber" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="起始底数" align="center">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.currReadingValue" size="mini"></el-input>
              </template>
            </el-table-column>
            <!-- <el-table-column label="combinate" align="center" v-if="userForm.userMeterTypeID==3">
              <template slot-scope="scope">
                <el-input v-model="scope.row.combinate" size="mini" disabled></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="比例(%)" align="center" v-if="userForm.userMeterTypeID==3">
              <template slot-scope="scope">
                <el-input v-model="scope.row.percentage" size="mini" placeholder="1-99" :disabled="scope.$index==0">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="安装位置" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.location" size="mini"></el-input>
              </template>
            </el-table-column>
            <!-- <el-table-column label="预存水量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.depositWater" size="mini"></el-input>
              </template>
            </el-table-column> -->
            <!-- <el-table-column label="减免水量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.freeQuota" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="打折水量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.discountQuota" size="mini"></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="其他费用" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.otherFeeStatus" size="mini">
                  <el-radio-button label="1">开</el-radio-button>
                  <el-radio-button label="0">关</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="水资源税" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.taxStatus" size="mini">
                  <el-radio-button label="1">开</el-radio-button>
                  <el-radio-button label="0">关</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="污水费" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.effluentFeeStatus" size="mini">
                  <el-radio-button label="1">开</el-radio-button>
                  <el-radio-button label="0">关</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>

            <el-table-column label="滞纳金费用" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.lateFeeStatus" size="mini">
                  <el-radio-button label="1">开</el-radio-button>
                  <el-radio-button label="0">关</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="滞纳金收取类型" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.lateFeeTypeID" placeholder="请选择滞纳金收取类型" size="mini">
                  <el-option v-for="(item,index) in lateFeeTypeList" :key="index" :label="item.lateFeeTypeName"
                    :value="item.lateFeeTypeID">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="滞纳金延迟时间(月)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.lateFeeDelay" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, userForm.meters)" type="text" size="small"
                  v-if="scope.$index!=0">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="table_rowBtn" @click="addRow" v-if="userForm.userMeterTypeID>1">
            <i class="el-icon-plus"></i> 新增水表
          </div>
          <div class="fc-red f14 mt20" v-if="userForm.userMeterTypeID==3">* 注：当前为
            单表混合类型，请确保所有虚拟水表比例总和为100%，各表比例请填写1-99的整数。</div>
          <!-- /水表信息 -->
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <span v-if="stepActive>0">
          <el-button @click="stepPrev">上一步</el-button>
        </span>
        <span v-if="stepActive<2">
          <el-button @click="stepNext">下一步</el-button>
        </span>
        <span v-if="stepActive==2">
          <el-button @click="addUserVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">保存全部</el-button>
        </span>
      </div>
    </el-dialog>
    <!-- /新增-->

    <!-- 快速开户 -->
    <el-dialog :title="isAddUser?'快速开户':'修改用户 - 用户编号：'+currentObj.userID" :visible.sync="addUserQuicklyVisible"
      width="90%" @closed="isShowLastBox=false;showMoreInput=false">
      <div v-if="!isShowLastBox">
        <el-form :model="userForm" ref="userForm" label-width="140px" class="sanfan-form" :inline="true">

          <!-- 用户信息 -->
          <el-form-item label="用户姓名：" prop="name" :rules="[{required: true, message: '姓名不能为空', trigger: 'blur'}]">
            <el-input v-model.trim="userForm.name" placeholder="请输入用户姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="phone" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur'}]">
            <el-input v-model.trim.number="userForm.phone" clearable></el-input>
          </el-form-item>
          <el-form-item label="详细地址：" prop="villageDetail"
            :rules="[{ required: true, message: '详细地址不能为空', trigger: 'blur'}]">
            <el-input v-model.trim="userForm.villageDetail" placeholder="详细地址，如x单元x号" clearable></el-input>
          </el-form-item>
          <el-form-item label="小区：" prop="villageID" :rules="[{ required: true, message: '请选择小区', trigger: 'change'}]">
            <el-select v-model="userForm.villageID" filterable :filter-method="villageFilter" placeholder="请输入查询选择小区"
              clearable @change="getVolumeByVillage" :disabled="userAddrListDisabled">
              <el-option v-for="item in userAddrList" :key="item.villageID" :label="item.villageName"
                :value="item.villageID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属册号：" prop="volumeID" :rules="[{ required: true, message: '请选择册号', trigger: 'change'}]">
            <el-select v-model.trim="userForm.volumeID" filterable placeholder="请选择册号" clearable
              @change="getCurrentVolumeVillage">
              <el-option v-for="item in volumeList" :key="item.volumeID" :label="item.volumeName"
                :value="item.volumeID">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 基础信息 ||item.userMeterTypeID==3-->
          <el-form-item label="户表类型：" class="must">
            <el-select v-model="userForm.userMeterTypeID" placeholder="请选择户表类型" @change="changeUserMeterType"
              @focus="focusUserMeterType">
              <el-option v-for="(item,index) in userMeterTypeList" :key="index" :label="item.userMeterTypeName"
                :disabled="userMeterTypeDisabled" :value="item.userMeterTypeID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用水类型：" class="must">
            <el-select v-model="userForm.waterRateID" placeholder="请选择用水类型" :disabled="userForm.userMeterTypeID>2">
              <el-option v-for="(item,index) in waterRateList" :key="index" :label="item.waterRateName"
                :value="item.waterRateID" :disabled="userForm.userMeterTypeID!=3&&item.waterRateID==0">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行业类型：" class="must">
            <el-select v-model="userForm.tradeTypeID" placeholder="请选择行业类型">
              <el-option v-for="(item,index) in tradeTypeList" :key="index" :label="item.tradeTypeName"
                :value="item.tradeTypeID">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="抄表周期：" class="must">
            <el-select v-model="userForm.meterReadCycleID" placeholder="请选择抄表周期">
              <el-option v-for="(item,index) in cycleAmountList" :key="index" :label="item.meterReadCycleName"
                :value="item.meterReadCycleID">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 其他信息 -->
          <el-form-item label=" ">
            <span class="link" @click="showMoreInput=!showMoreInput">完善更多信息 <i class="el-icon-circle-plus"></i></span>
          </el-form-item>
          <div v-if="showMoreInput">

            <el-form-item label="别名：">
              <el-input v-model="userForm.aliasName" clearable></el-input>
            </el-form-item>
            <el-form-item label="人口数：">
              <el-input v-model.number="userForm.peopleNum" type="number" min="1" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系方式2：">
              <el-input v-model.number="userForm.phoneA" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系方式3：">
              <el-input v-model.number="userForm.phoneB" clearable></el-input>
            </el-form-item>
            <el-form-item label="微信号：">
              <el-input v-model="userForm.wechatID" clearable></el-input>
            </el-form-item>

            <el-form-item label="合同名：">
              <el-input v-model="userForm.fileName" clearable></el-input>
            </el-form-item>
            <el-form-item label="合同编号：">
              <el-input v-model="userForm.contractID" clearable></el-input>
            </el-form-item>
            <!-- <div></div> -->
            <el-form-item label="备注：">
              <el-input v-model="userForm.mk" type="textarea" style="width:217px;" rows="1" clearable></el-input>
            </el-form-item>

          </div>

          <!-- 水表信息 -->
          <el-table class="sanfan-table" :data="userForm.meters" style="width: 100%;">
            <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
            <el-table-column v-if="!isAddUser" label="水表编号" width="80" align="center">
              <template slot-scope="scope">
                {{scope.row.meterID}}
              </template>
            </el-table-column>
            <el-table-column label="抄表类型" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.meterReadTypeID" placeholder="请选择" size="mini"
                  :disabled="scope.$index>0&&userForm.userMeterTypeID==3"
                  @change="changeCurrReadingValue(scope.row.meterReadTypeID,scope.$index)">
                  <el-option v-for="(item,index) in typeAmountList" :key="index" :label="item.meterReadTypeName"
                    :value="item.meterReadTypeID">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="用水类型" align="center" v-if="userForm.userMeterTypeID>2">
              <template slot-scope="scope">
                <el-select v-model="scope.row.waterRateID" placeholder="请选择用水类型" size="mini"
                  :disabled="scope.$index==0&&userForm.userMeterTypeID==3">
                  <el-option v-for="(item,index) in waterRateList" :key="index" :label="item.waterRateName"
                    :value="item.waterRateID" :disabled="item.waterRateID==0">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="设备类型" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.meterTypeID" placeholder="请选择设备类型" size="mini">
                  <el-option v-for="(item,index) in devTypeList" :key="index" :label="item.meterTypeName"
                    :value="item.meterTypeID"
                    :disabled="item.meterTypeID==0&&userForm.userMeterTypeID!=3||userForm.userMeterTypeID==3&&item.meterTypeID!=0&&scope.$index!=0||userForm.userMeterTypeID==3&&item.meterTypeID==0">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="设备编号（远传表）" align="center">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.sn" size="mini" v-if="scope.row.meterTypeID==2"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="水表口径" align="center">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.caliber" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="起始底数" align="center">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.currReadingValue" size="mini"></el-input>
              </template>
            </el-table-column>
            <!-- <el-table-column label="combinate" align="center" v-if="userForm.userMeterTypeID==3">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.combinate" size="mini" disabled></el-input>
                </template>
              </el-table-column> -->
            <el-table-column label="比例(%)" align="center" v-if="userForm.userMeterTypeID==3">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.percentage" size="mini" placeholder="1-99"
                  :disabled="scope.$index==0">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="安装位置" align="center">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.location" size="mini"></el-input>
              </template>
            </el-table-column>
            <!-- <el-table-column label="预存水量" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.depositWater" size="mini"></el-input>
                </template>
              </el-table-column> -->
            <!-- <el-table-column label="减免水量" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.freeQuota" size="mini"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="打折水量" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.discountQuota" size="mini"></el-input>
                </template>
              </el-table-column> -->
            <el-table-column label="其他费用" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.otherFeeStatus" size="mini">
                  <el-radio-button label="1">开</el-radio-button>
                  <el-radio-button label="0">关</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="水资源税" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.taxStatus" size="mini">
                  <el-radio-button label="1">开</el-radio-button>
                  <el-radio-button label="0">关</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="污水费" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.effluentFeeStatus" size="mini">
                  <el-radio-button label="1">开</el-radio-button>
                  <el-radio-button label="0">关</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>

            <el-table-column label="滞纳金费用" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.lateFeeStatus" size="mini">
                  <el-radio-button label="1">开</el-radio-button>
                  <el-radio-button label="0">关</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="滞纳金收取类型" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.lateFeeTypeID" placeholder="请选择滞纳金收取类型" size="mini">
                  <el-option v-for="(item,index) in lateFeeTypeList" :key="index" :label="item.lateFeeTypeName"
                    :value="item.lateFeeTypeID">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="滞纳金延迟时间(月)" align="center">
              <template slot-scope="scope">
                <el-input v-model.trim="scope.row.lateFeeDelay" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click.native.prevent="deleteRow(scope.$index, userForm.meters)" type="text" size="small"
                  v-if="scope.$index!=0">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="table_rowBtn" @click="addRow" v-if="userForm.userMeterTypeID>1">
            <i class="el-icon-plus"></i> 新增水表
          </div>
          <div class="fc-red f14 mt20" v-if="userForm.userMeterTypeID==3">* 注：当前为
            单表混合类型，请确保所有虚拟水表比例总和为100%，各表比例请填写1-99的整数。</div>
          <!-- /水表信息 -->
        </el-form>
      </div>
      <div v-else class="align_c">
        <p class="fc-green  f20">新户添加成功!</p>
        <p class="mt20 f16">
          用户姓名：<span class="f20">{{addSuccess.name}}</span>
          <span style="display:inline-block;width:40px"></span>
          用户编号为：<span class="f20">{{addSuccess.meterID}}</span>
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <div v-if="!isShowLastBox">
          <template v-if="isAddUser">
            <el-button @click="clearFormInfo">清空记录</el-button>
            <el-button @click="addUserQuicklyVisible = false">取 消</el-button>
          </template>
          <el-button type="primary" @click="addUserQuickly">保 存</el-button>
        </div>
        <div v-else>
          <el-button @click="clearFormInfo();addUserQuicklyVisible = false;">取 消</el-button>
          <el-button type="primary" @click="isShowLastBox=false;showMoreInput= false;">继续录入下一个</el-button>
        </div>

      </div>

    </el-dialog>
    <!-- /快速开户-->


    <!-- 修改 -->
    <el-dialog :title="'修改用户'" :visible.sync="editUserVisible" width="800px">
      <el-form :model="userEditForm" label-width="140px" class="sanfan-form" :inline="true">
        <el-form-item label="别名：" class="must">
          <el-input v-model="userEditForm.aliasName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" class="must">
          <el-input v-model="userEditForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="人口数：">
          <el-input v-model="userEditForm.peopleNum"></el-input>
        </el-form-item>
        <el-form-item label="微信号：">
          <el-input v-model="userEditForm.wechatID"></el-input>
        </el-form-item>
        <el-form-item label="详细地址：" class="must">
          <el-input v-model="userEditForm.villageDetail" placeholder="详细地址，如x单元x号"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="userEditForm.mk" type="textarea" style="width:560px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">保存修改</el-button>
      </div>
    </el-dialog>
    <!--/修改 -->

    <!-- 过户 -->
    <el-dialog :title="'过户 - 用户编号：'+currentObj.userID" :visible.sync="editUserInfoVisible" width="800px">
      <el-form :model="userEditForm" label-width="140px" class="sanfan-form" :inline="true">
        <el-form-item label="新用户姓名：" prop="name" :rules="[{required: true, message: '姓名不能为空', trigger: 'blur'}]">
          <el-input v-model="userEditForm.name" placeholder="请输入用户姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="别名：">
          <el-input v-model="userEditForm.aliasName" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" prop="phone" :rules="[{required: true, message: '联系方式不能为空', trigger: 'blur'}]">
          <el-input v-model="userEditForm.phone" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系方式2：">
          <el-input v-model.number="userEditForm.phoneA" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系方式3：">
          <el-input v-model.number="userEditForm.phoneB" clearable></el-input>
        </el-form-item>
        <el-form-item label="人口数：">
          <el-input v-model="userEditForm.peopleNum" clearable></el-input>
        </el-form-item>
        <el-form-item label="微信号：">
          <el-input v-model="userEditForm.wechatID" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属册号：" prop="volumeID" :rules="[{ required: true, message: '请选择册号', trigger: 'change'}]">
          <el-select v-model.trim="userEditForm.volumeID" filterable placeholder="请选择册号">
            <el-option v-for="item in volumeList" :key="item.volumeID" :label="item.volumeName" :value="item.volumeID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小区：" prop="villageID" :rules="[{ required: true, message: '请选择小区', trigger: 'change'}]">
          <el-select v-model="userEditForm.villageID" filterable :filter-method="villageFilter" placeholder="请输入查询选择小区">
            <el-option v-for="item in userAddrList" :key="item.villageID" :label="item.villageName"
              :value="item.villageID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址：" class="must">
          <el-input v-model="userEditForm.villageDetail" placeholder="详细地址，如x单元x号" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="userEditForm.mk" type="textarea" style="width:590px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editUserInfoVisible = false">取 消</el-button>
        <el-button type="primary">保存修改</el-button>
      </div>
    </el-dialog>
    <!-- 报停 弹个提示框就完事儿了-->
    <!-- 销户 弹个提示框就完事儿了-->

    <!-- 换表 -->
    <el-dialog :title="'换表'" :visible.sync="changeTableVisible" width="90%">
      <el-form :model="userForm" ref="userForm" label-width="140px" class="sanfan-form" :inline="true">

        <!-- 基础信息 -->
        <el-form-item label="户表类型：" class="must">
          <el-select v-model="userForm.userMeterTypeID" placeholder="请选择户表类型" @change="changeUserMeterType"
            @focus="focusUserMeterType">
            <el-option v-for="(item,index) in userMeterTypeList" :key="index" :label="item.userMeterTypeName"
              :disabled="userMeterTypeDisabled||item.userMeterTypeID==3" :value="item.userMeterTypeID">
            </el-option>
          </el-select>
          <span class="tip"></span>
        </el-form-item>

        <!-- 水表信息 -->
        <el-table class="sanfan-table" :data="userForm.meters" style="width: 100%;">
          <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
          <el-table-column v-if="!isAddUser" label="水表编号" width="80" align="center">
            <template slot-scope="scope">
              {{scope.row.meterID}}
            </template>
          </el-table-column>
          <el-table-column label="抄表类型" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.meterReadTypeID" placeholder="请选择" size="mini"
                :disabled="scope.$index>0&&userForm.userMeterTypeID==3"
                @change="changeCurrReadingValue(scope.row.meterReadTypeID,scope.$index)">
                <el-option v-for="(item,index) in typeAmountList" :key="index" :label="item.meterReadTypeName"
                  :value="item.meterReadTypeID">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="用水类型" align="center" v-if="userForm.userMeterTypeID==3">
            <template slot-scope="scope">
              <el-select v-model="scope.row.waterRateID" placeholder="请选择用水类型" size="mini" :disabled="scope.$index==0">
                <el-option v-for="(item,index) in waterRateList" :key="index" :label="item.waterRateName"
                  :value="item.waterRateID" :disabled="item.waterRateID==0">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="设备类型" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.meterTypeID" placeholder="请选择设备类型" size="mini">
                <el-option v-for="(item,index) in devTypeList" :key="index" :label="item.meterTypeName"
                  :value="item.meterTypeID"
                  :disabled="item.meterTypeID==0&&userForm.userMeterTypeID!=3||userForm.userMeterTypeID==3&&item.meterTypeID!=0&&scope.$index!=0||userForm.userMeterTypeID==3&&item.meterTypeID==0">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="设备编号（远传表）" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.sn" size="mini" v-if="scope.row.meterTypeID==2"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="水表口径" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.caliber" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="起始底数" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.currReadingValue" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="比例(%)" align="center" v-if="userForm.userMeterTypeID==3">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.percentage" size="mini" placeholder="1-99" :disabled="scope.$index==0">
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="安装位置" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.location" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="其他费用" align="center">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.otherFeeStatus" size="mini">
                <el-radio-button label="1">开</el-radio-button>
                <el-radio-button label="0">关</el-radio-button>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="水资源税" align="center">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.taxStatus" size="mini">
                <el-radio-button label="1">开</el-radio-button>
                <el-radio-button label="0">关</el-radio-button>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="污水费" align="center">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.effluentFeeStatus" size="mini">
                <el-radio-button label="1">开</el-radio-button>
                <el-radio-button label="0">关</el-radio-button>
              </el-radio-group>
            </template>
          </el-table-column>

          <el-table-column label="滞纳金费用" align="center">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.lateFeeStatus" size="mini">
                <el-radio-button label="1">开</el-radio-button>
                <el-radio-button label="0">关</el-radio-button>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="滞纳金收取类型" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.lateFeeTypeID" placeholder="请选择滞纳金收取类型" size="mini">
                <el-option v-for="(item,index) in lateFeeTypeList" :key="index" :label="item.lateFeeTypeName"
                  :value="item.lateFeeTypeID">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="滞纳金延迟时间(月)" align="center">
            <template slot-scope="scope">
              <el-input v-model.trim="scope.row.lateFeeDelay" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, userForm.meters)" type="text" size="small"
                v-if="scope.$index!=0">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table_rowBtn" @click="addRow" v-if="userForm.userMeterTypeID>1">
          <i class="el-icon-plus"></i> 新增水表
        </div>
        <div class="fc-red f14 mt20" v-if="userForm.userMeterTypeID==3">* 注：当前为
          单表混合类型，请确保所有虚拟水表比例总和为100%，各表比例请填写1-99的整数。</div>
        <!-- /水表信息 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserQuickly">保 存</el-button>
      </div>

    </el-dialog>

    <!-- 水表变更（移动水表） -->
    <el-dialog :title="'水表变更'" :visible.sync="changeTableByUserVisible" width="600">
      <div style="margin:0 auto;width:520px;">
        <el-transfer class="sanfan-transfer" v-model="transfer_value" :titles="transfer_titles" filterable :props="{
      key: 'value',
      label: 'desc'
    }" :data="userMeterList">
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeTableByUserVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserQuickly">保 存</el-button>
      </div>

    </el-dialog>



  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        search: { //搜索条件
          userID: "5",
          meterID: "5",
        },
        stepActive: 0, //步骤条
        currentObj: {
            "readerName": "\u767d\u660e\u5e38",
            "shopname": "",
            "lastReadingTime": "2024-07-09 00:00:00",
            "volumeName": "\u65b0\u534e\u4e66\u5e97\u5bbf\u820d",
            "currReadingValue": 485,
            "waterWell": "",
            "meterReadTypeName": "\u6b63\u5e38",
            "villageName": "\u65b0\u534e\u4e66\u5e97\u5bbf\u820d",
            "meterTypeName": "\u673a\u68b0\u6c34\u8868",
            "userMeterTypeName": "\u5355\u8868\u7528\u6237",
            "meterReadTypeID": 1,
            "userID": 5,
            "meterTypeID": 1,
            "meterStatus": 1,
            "meterID": 5,
            "depositMoney": 0.0,
            "status": 1,
            "caliber": 15,
            "pns": "13313436669-\u9ed8\u8ba4",
            "waterRateID": 1,
            "meterReadCycleName": "\u5355\u6708",
            "tradeTypeName": "\u9ed8\u8ba4",
            "extMK": "",
            "costTypeName": "\u73b0\u91d1/\u5fae\u4fe1\u652f\u4ed8",
            "meterCreateTime": "2013-03-19 00:00:00",
            "waterRateName": "\u751f\u6d3b\u7528\u6c34",
            "currMeterReadingRecordStatus": 3,
            "name": "\u4faf\u51e4\u5170",
            "tradeTypeID": 1,
            "createSysuser": "\u738b\u6811\u6797",
            "peopleNum": 3,
            "lastReadingValue": 485,
            "villageDetail": "\u65b0\u534e\u4e66\u5e97\u5bbf\u820d",
            "aliasName": "",
            "contractID": "1905"
        },
        currentWaterInfo: {},
        tableHeader: [{
            name: "用户编号",
            mark: "meterID",
            minWidth: "90"
          },
          {
            name: "设备类型",
            mark: "meterTypeName",
            minWidth: "90"
          },
          {
            name: "用水类型",
            mark: "waterRateName",
            minWidth: "90"
          },
          {
            name: "抄表类型",
            mark: "meterReadTypeName",
            minWidth: "90"
          },
          {
            name: "上期底数",
            mark: "lastReadingValue",
            minWidth: "90"
          },
          {
            name: "当前底数",
            mark: "currReadingValue",
            minWidth: "90"
          },
          {
            name: "安装位置",
            mark: "location",
            minWidth: "90"
          },
          {
            name: "创建时间",
            mark: "meterCreateTime",
            minWidth: "90"
          },
          // {
          //   name: "操作",
          //   mark: "",
          //   minWidth: "90"
          // },
        ],
        tableOperation: [{
          name: "换表",
          mark: "edit",
          icon: false
        }],
        tablePagination: {
          show: false,
          current: 1,
          size: 10,
          total: 1
        },
        tableData: [],
        isAddUser: false,
        addUserVisible: false,
        editUserVisible: false,
        addUserQuicklyVisible: false,
        showMoreInput: false, //快速开户里显示更多的输入信息
        isShowLastBox: false, //保存成功后显示上次保存的用户的id
        editUserInfoVisible: false, //过户的框
        changeTableVisible: false, //换表的框
        changeTableByUserVisible: false, //水表变更（水表迁移）的框
        userAddrListDisabled: false, //地址列表是否可选
        addSuccess: { //保存成功后的用户id,用户名
          userID: "",
          meterID: "",
          name: ""
        },
        userForm: {
          //step1
          name: "", //真名
          aliasName: "", //别名
          phone: "", //手机
          phoneA: "", //手机1
          phoneB: "", //手机2
          status: "1", //插入状态1和0等
          volumeID: "", //册号
          villageID: "", //小区ID
          villageDetail: "", //详细地址   如几单元几号
          peopleNum: "", //人口数量   可空
          wechatID: "", //绑定的微信号  可空
          //step2
          userMeterTypeID: 1, //1单表2多表3单表混合
          waterRateID: 1, //用水类型
          tradeTypeID: "", //行业id
          costTypeID: "", //缴费类型id
          meterReadCycleID: "", //抄表周期
          depositMoney: "0.00", //预存款

          //step3
          meters: [{
            sn: "", //远传水表号
            caliber: "", //口径
            meterTypeID: 1, //0虚拟表
            meterReadTypeID: 1, //抄表类型
            waterRateID: 1, //用水类型
            currReadingValue: 0, //--底数
            location: "", //--安装位置
            // depositWater: 0, //预存水量
            freeQuota: "", //--减免水量
            discountQuota: "", //--打折水量
            effluentFeeStatus: 1, //--污水费开关   1
            taxStatus: 1, //--税开关    1
            otherFeeStatus: 0, //--其他费用开关   1
            lateFeeStatus: 1, //--滞纳金费用开关
            lateFeeTypeID: 1, //滞纳金收取类型
            lateFeeDelay: 2, //--滞纳金延迟时间   月
            combinate: 0, //0只有实际表     >0 含虚拟表    1主表
            percentage: 0 //100
          }], //水表

          //step4
          totalUse: "0", //总计用水量
          mk: "", //备注
          fileName: "", //合同名
          contractID: "", //合同编号

        },
        userEditForm: {},
        devTypeList: [],
        waterRateList: [{
          waterRateName: "生活用水",
          waterRateID: "1"
        }, {
          waterRateName: "居民用水",
          waterRateID: "2"
        }, {
          waterRateName: "特种用水",
          waterRateID: "3"
        }, {
          waterRateName: "非居民用水",
          waterRateID: "4"
        }, {
          waterRateName: "非生活用水",
          waterRateID: "5"
        }],
        userMeterTypeDisabled: false,
        statusList: [{
          id: "1",
          name: "正常"
        }, {
          id: "0",
          name: "欠费"
        }],
        userMeterTypeList: [{
            userMeterTypeID: 1,
            userMeterTypeName: "单表用户"
          },
          {
            userMeterTypeID: 2,
            userMeterTypeName: "多表用户"
          },
          {
            userMeterTypeID: 3,
            userMeterTypeName: "单表混合"
          },
          {
            userMeterTypeID: 4,
            userMeterTypeName: "多表混合"
          }
        ],
        meterReaderList: [],
        tradeTypeList: [{
            tradeTypeID: 1,
            tradeTypeName: "默认"
          },
          {
            tradeTypeID: 4,
            tradeTypeName: "餐饮"
          },
          {
            tradeTypeID: 5,
            tradeTypeName: "住宿"
          },
          {
            tradeTypeID: 6,
            tradeTypeName: "美容美发"
          },
          {
            tradeTypeID: 7,
            tradeTypeName: "洗浴"
          },
          {
            tradeTypeID: 8,
            tradeTypeName: "洗车"
          },
          {
            tradeTypeID: 9,
            tradeTypeName: "普通商店"
          }
        ],
        cycleAmountList: [{
            meterReadCycleID: 0,
            meterReadCycleName: "每月"
          },
          {
            meterReadCycleID: 1,
            meterReadCycleName: "单月"
          },
          {
            meterReadCycleID: 2,
            meterReadCycleName: "双月"
          }
        ],
        typeAmountList: [{
            id: "0",
            name: "估抄"
          },
          {
            id: "1",
            name: "正常"
          },
          {
            id: "-1",
            name: "倒表"
          }
        ],
        costTypeList: [{
          costTypeID: "",
          costTypeName: "全部"
        }],
        userAddrList: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ],
        userAddrListCopy: [{
            villageName: "新华巷",
            villageID: 28
          },
          {
            villageName: "朝阳路东",
            villageID: 29
          },
          {
            villageName: "朝阳路西",
            villageID: 32
          },
          {
            villageName: "党校后",
            villageID: 33
          },
          {
            villageName: "鸳鸯楼",
            villageID: 34
          },
          {
            villageName: "人大单元楼",
            villageID: 35
          },
          {
            villageName: "老干部单元楼",
            villageID: 36
          },
          {
            villageName: "水泉崖",
            villageID: 38
          },
          {
            villageName: "民政局宿舍",
            villageID: 40
          },
          {
            villageName: "总表（吴）",
            villageID: 41
          },
          {
            villageName: "富康家园",
            villageID: 42
          },
          {
            villageName: "教委单元楼",
            villageID: 45
          },
          {
            villageName: "德和盛嘉园",
            villageID: 95
          }
        ],
        volumeList: [],
        volumeListCopy: [],
        lateFeeTypeList: [],
        transfer_titles: ['空闲水表', '当前用户'],
        transfer_value: [1], //当前用户下的水表列表
        userMeterList: [ //水表列表/穿梭框数据-包含所有空闲水表和当前用户下的水表
          {
            value: 1,
            desc: "设备编号 1",
            disabled: true
          },
          {
            value: 2,
            desc: "设备编号 2",
            disabled: false
          },
          {
            value: 3,
            desc: "设备编号 3"
          },
          {
            value: 4,
            desc: "设备编号 4"
          },
        ],
      }
    },
    mounted() {
      // this.initData();
    },
    beforeDestroy() {},
    created() {},
    methods: {
      async initData() {
        await this.getAllTypes();
      },

      villageFilter(txt) {
        //对绑定数据赋值
        this.userAddrList = this.userAddrListCopy.filter((item) => {
          if (item.villageName.indexOf(txt) !== -1 || item.sx.indexOf(txt) !== -1 || item.qp.indexOf(txt) !== -1) {
            return true
          }
        })
      },
      async addUserResults() { //调用修改或新增的方法,成功返回true
        const self = this;
        var bool = false;

        var meters = self.userForm.meters;
        var param = {
          meters: JSON.stringify(meters), //水表

          name: self.userForm.name, //真名
          aliasName: self.userForm.aliasName, //别名
          phone: self.userForm.phone, //手机
          phoneA: self.userForm.phoneA, //手机1
          phoneB: self.userForm.phoneB, //手机2
          status: self.userForm.status, //插入状态1和0等
          volumeID: self.userForm.volumeID, //册号
          villageID: self.userForm.villageID, //小区ID
          villageDetail: self.userForm.villageDetail, //详细地址   如几单元几号
          peopleNum: self.userForm.peopleNum, //人口数量   可空
          wechatID: self.userForm.wechatID, //绑定的微信号  可空
          userMeterTypeID: self.userForm.userMeterTypeID, //1单表2多表3单表混合
          waterRateID: self.userForm.waterRateID, //用水类型
          tradeTypeID: self.userForm.tradeTypeID, //行业id
          costTypeID: self.userForm.costTypeID, //缴费类型id
          meterReadCycleID: self.userForm.meterReadCycleID, //抄表周期
          depositMoney: self.userForm.depositMoney, //预存款
          //step4
          totalUse: self.userForm.totalUse, //总计用水量
          mk: self.userForm.mk, //备注
          fileName: self.userForm.fileName, //合同名
          contractID: self.userForm.contractID, //合同编号
        }

        var allMetersPercentage = 0;
        meters.forEach(element => {
          allMetersPercentage += parseInt(element.percentage)
        });
        if (self.userForm.userMeterTypeID == 3 && allMetersPercentage != 100) {
          self.$message.error("当前水表比例设置不正确！请核对无误后重新提交");
          return false
        }

        if (self.isAddUser) {
          self.addSuccess.name = self.userForm.name;
          await self.$axios.post("/service/bsMeterUserAdd", param).then(res => {
            if (res.data.status === "success") {
              // self.$message.success(res.data.res);
              //保存成功后显示结果界面的数据
              self.addSuccess.userID = res.data.userID
              self.addSuccess.meterID = res.data.meterID
              bool = true
            } else {
              self.$message.error(res.data.res);
            }
          });
        } else {
          param.userID = self.currentObj.userID
          await self.$axios.post("/service/bsMeterUserMod", param).then(res => {
            if (res.data.status === "success") {
              self.$message.success(res.data.res);
              bool = true
            } else {
              self.$message.error(res.data.res);
            }
          });
        }
        return bool
      },
      async addUser() {
        const self = this;
        var results = await self.addUserResults()
        if (results) {
          self.addUserVisible = false
          self.clearFormInfo()
        }
      },
      async addUser2() {
        const self = this;
        var results = await self.addUserResults()
        if (results) {
          self.userForm.status = "1" //用户状态
          self.userForm.costTypeID = this.costTypeList[0].costTypeID, //缴费类型id
            self.userForm.name = "" //用户名
          self.userForm.phone = "" //联系方式
          self.userForm.villageDetail = "" //详细地址
          self.userForm.phoneA = "" //联系方式2
          self.userForm.phoneB = "" //联系方式3
          self.userForm.peopleNum = "" //人口数
          self.userForm.wechatID = "" //微信号
          self.userForm.depositMoney = "0.00" //余额
          self.userForm.totalUse = "0" //总计用水量
          self.userForm.mk = "" //备注
          self.userForm.fileName = "" //合同名
          self.userForm.contractID = "" //合同编号
          //显示存储结果
          self.isShowLastBox = true;
        }
      },
      addUserQuickly() { //快速保存
        const self = this;
        self.$refs["userForm"].validate((valid) => {
          if (!valid) {
            self.$message.error("请先将当前页标星号的信息录入完整！");
            return false;
          }
          self.addUser2()
        });
      },
      editUser() { //修改用户资料
        const self = this;
        var param = {
          userID: self.userEditForm.userID,
          aliasName: self.userEditForm.aliasName,
          phone: self.userEditForm.phone,
          villageDetail: self.userEditForm.villageDetail,
          peopleNum: self.userEditForm.peopleNum,
          wechatID: self.userEditForm.wechatID,
          mk: self.userEditForm.mk
        }
        self.$axios.post("/service/bsMeterUserMod", param).then(res => {
          if (res.data.status === "success") {
            self.$message.success(res.data.res);
            self.editUserVisible = false
            self.getUserByUserID();
          } else {
            self.$message.error(res.data.res);
          }
        });


      },
      deleteRow(index, rows) {
        var self = this;
        if (self.userForm.meters.length == 1) {
          self.$message.error("请至少保存1条水表信息！");
        } else {
          rows.splice(index, 1);
        }

      },
      addRow() { //添加一条水表记录
        var self = this;
        var item = {
          meterTypeID: self.devTypeList[1].meterTypeID,
          meterReadTypeID: 1, //抄表类型
          waterRateID: 1, //用水类型
          // depositWater: 0, //预存水量
          effluentFeeStatus: 1, //--污水费开关   1
          taxStatus: 1, //--税开关    1
          otherFeeStatus: 0, //--其他费用开关   1
          lateFeeStatus: 1, //--滞纳金费用开关
          lateFeeTypeID: 1, //滞纳金收取类型
          lateFeeDelay: 2, //--滞纳金延迟时间   月
        }
        if (self.userForm.userMeterTypeID == 3) { //单表混合
          item.meterTypeID = 0 //0虚拟表
          item.combinate = self.userForm.meters.length + 1 //0只有实际表     >0 含虚拟表    1主表
          item.percentage = 0 //100
        }
        self.userForm.meters.push(item);
      },
      changeUserMeterType(id) {
        var self = this;
        self.userForm.waterRateID = 1
        if (id == 1) { //单表用户
          self.userForm.meters[0].combinate = 0
        } else if (id == 1) { //多表用户
          self.userForm.meters[0].combinate = 0
        } else if (id == 3) { //单表混合
          self.userForm.waterRateID = 0
          self.userForm.meters[0].waterRateID = 0
          self.userForm.meters[0].combinate = 1
          if (self.userForm.meters.length < 3) {
            self.addRow(); //加两个水表
            self.addRow();
          }
        } else if (id == 4) { //多表混合
          self.userForm.waterRateID = 0
          self.userForm.meters[0].waterRateID = 1
        }
      },
      focusUserMeterType(e, a) {
        var self = this;
        if (self.userForm.meters.length > 1) {
          self.$message.error("检测到您当前存在多块水表信息，要变更类型请先到水表信息中删除主表外的其它表。");
          self.userMeterTypeDisabled = true
          return false
        } else {
          self.userMeterTypeDisabled = false
        }
      },
      async getUserByUserID() { //根据id查询指定用户的详细信息
        const self = this;
        // if (!self.search.userID) {
        //   self.$message.error("用户id不能为空！");
        //   return false
        // }
        if (!self.search.meterID) {
          self.$message.error("用户编号不能为空！");
          return false
        }
        var param = {
          // userID: self.search.userID
          meterID: self.search.meterID
        }
        // await self.$axios.post("/service/bsMeterUserGetA", param).then(res => {
        //   if (res.data.status === "success") {
        //     self.currentObj = res.data.res
        //   } else {
        self.currentObj = {}
        self.currentWaterInfo = {}
        //   }
        // });

        if (!Object.keys(self.currentObj).length > 0) {
          self.$message.error("未查询到相关用户，请确认输入的编号无误！");
          return false
        }

        var waterInfo = self.waterRateList.filter((value, index) => value.waterRateID == self.currentObj.waterRateID)
        self.currentWaterInfo = waterInfo[0];

        self.tableData = self.currentObj.meters;
      },
      stepNext() { //下一步
        this.$refs["userForm"].validate((valid) => {
          if (valid) {
            this.stepActive++
          } else {
            this.$message.error("请先将当前页标星号的信息录入完整！");
            return false;
          }
        });

      },
      stepPrev() { //上一步
        this.$refs["userForm"].validate((valid) => {
          if (valid) {
            this.stepActive--
          } else {
            this.$message.error("请先将当前页标星号的信息录入完整！");
            return false;
          }
        });

      },
      clearFormInfo() { //新增时清空表单
        this.userForm = {
          //step1
          name: "", //真名
          aliasName: "", //别名
          phone: "", //手机
          phoneA: "", //手机1
          phoneB: "", //手机2
          status: "1", //插入状态1和0等
          volumeID: "", //册号
          villageID: "", //小区ID
          villageDetail: "", //详细地址   如几单元几号
          peopleNum: "", //人口数量   可空
          wechatID: "", //绑定的微信号  可空
          //step2
          userMeterTypeID: 1, //0单表1多表2单表混合
          waterRateID: 1, //用水类型
          tradeTypeID: this.tradeTypeList[0].tradeTypeID, //行业id
          costTypeID: this.costTypeList[0].costTypeID, //缴费类型id
          meterReadCycleID: this.cycleAmountList[0].meterReadCycleID, //抄表周期
          depositMoney: "0.00", //预存款

          //step3
          meters: [{
            sn: "", //远传水表号
            caliber: "", //口径
            meterTypeID: 1, //0虚拟表
            meterReadTypeID: 1, //抄表类型
            waterRateID: 1, //用水类型
            currReadingValue: 0, //--底数
            location: "", //--安装位置
            // depositWater: 0, //预存水量
            freeQuota: "", //--减免水量
            discountQuota: "", //--打折水量
            effluentFeeStatus: 1, //--污水费开关   1
            taxStatus: 1, //--税开关    1
            otherFeeStatus: 0, //--其他费用开关   1
            lateFeeStatus: 1, //--滞纳金费用开关
            lateFeeTypeID: 1, //滞纳金收取类型
            lateFeeDelay: "2", //--滞纳金延迟时间   月
            combinate: 0, //0只有实际表     >0 含虚拟表    1主表
            percentage: 0 //100
          }], //水表

          //step4
          totalUse: "0", //总计用水量
          mk: "", //备注
          fileName: "", //合同名
          contractID: "", //合同编号


        }
        //重置下拉框数据
        this.userAddrListDisabled = false;
        this.userAddrList = this.userAddrListCopy;
        this.volumeList = this.volumeListCopy;
        // this.stepActive = 0;
        // this.tableData = []
      },
      update(type) { //修改信息
        const self = this;
        if (!Object.keys(self.currentObj).length > 0) {
          self.$message.error("请先输入用户编号选择一个用户");
          return false
        }
        self.isAddUser = false
        self.userEditForm = JSON.parse(JSON.stringify(self.currentObj))
        self.userForm = JSON.parse(JSON.stringify(self.currentObj))

        var param = {
          userID: self.currentObj.userID
        }
        switch (type) {
          case 1: //修改全部信息
            self.addUserQuicklyVisible = true
            self.showMoreInput = true
            break;
          case 2: //过户
            self.editUserInfoVisible = true
            break;
          case 3: //报停
            param.status = 0;

            self.$confirm('确定停用当前用户吗？<br> 停用后该用户下的所有水表将同时停用。', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              iconClass: "fc-yellow el-icon-question",
              dangerouslyUseHTMLString: true
            }).then(() => {
              self.$axios.post("/service/bsMeterUserStatusMod", param).then(res => {
                if (res.data.status === "success") {
                  self.$message({
                    type: 'success',
                    message: '停用成功!'
                  });
                  //刷新数据
                  self.getUserByUserID()
                } else {
                  self.$message.error(res.data.res);
                }
              });

            }).catch(() => {});
            break;
          case 4: //重新启用
            param.status = 1;
            self.$confirm('确定启用当前用户吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              iconClass: "fc-yellow el-icon-question"
            }).then(() => {

              self.$axios.post("/service/bsMeterUserStatusMod", param).then(res => {
                if (res.data.status === "success") {
                  self.$message({
                    type: 'success',
                    message: '启用成功!'
                  });
                  //刷新数据
                  self.getUserByUserID()
                } else {
                  self.$message.error(res.data.res);
                }
              });

            }).catch(() => {});
            break;
          case 5: //销户
            self.$confirm('确定删除当前用户吗？<br> 删除后该用户下的所有水表记录将同时删除。', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              iconClass: "fc-red el-icon-question",
              dangerouslyUseHTMLString: true
            }).then(() => {
              self.$axios.post("/service/bsMeterUserUnsubscribe", param).then(res => {
                if (res.data.status === "success") {
                  self.$message({
                    type: 'success',
                    message: '销户成功!'
                  });
                  //刷新数据
                  self.currentObj = {};
                  self.tableData = []
                } else {
                  self.$message.error(res.data.res);
                }
              });

            }).catch(() => {});
            break;
          case 6: //换表
            self.changeTableVisible = true
            break;
          case 7: //水表变更（移动水表）
            self.getFreeMeter()
            self.changeTableByUserVisible = true
            break;

          default:
            break;
        }

      },
      updateUserInfo() { //修改信息-过户
      },
      getFreeMeter() { //获取空闲水表，拼接当前选中的水表

      },
      changeMeterReadType(e) { //切换抄表类型  为倒表底数复位99999 正常0
        console.log("!!!:", e)
      },
      async getAllTypes() { //获取全部基础数据列表
        const self = this;
        var param = {
          types: "all"
        }
        self.$axios.post("/service/bsSelectListGet", param).then(res => {
          if (res.data.status === "success") {
            var tmp = res.data.res;
            //设备类型列表
            self.devTypeList = tmp.meterType
            //水价类型列表
            self.waterRateList = tmp.waterRate
            //册号
            self.volumeList = tmp.volume
            self.volumeListCopy = Object.assign(self.volumeList);
            //小区
            self.userAddrList = tmp.village
            //保留数据源
            self.userAddrListCopy = Object.assign(self.userAddrList);

            //用户行业类型
            self.tradeTypeList = tmp.tradeType
            self.userForm.tradeTypeID = tmp.tradeType[0].tradeTypeID
            //缴费方式
            self.costTypeList = tmp.costType
            self.userForm.costTypeID = tmp.costType[0].costTypeID
            //抄表周期
            self.cycleAmountList = tmp.meterReadCycle
            self.userForm.meterReadCycleID = tmp.meterReadCycle[0].meterReadCycleID
            //倒表估抄
            self.typeAmountList = tmp.meterReadType
            //滞纳金收取类型
            self.lateFeeTypeList = tmp.lateFeeType
            //户表类型
            self.userMeterTypeList = tmp.userMeterType
            self.userForm.userMeterTypeID = self.userMeterTypeList[0].userMeterTypeID
          } else {
            self.$message(res.data.res);
          }
        });
      },
      changeCurrReadingValue(value, index) { //按类型修改底数
        var self = this;
        if (value == -1) {
          self.userForm.meters[index].currReadingValue = 99999
        } else {
          self.userForm.meters[index].currReadingValue = 0
        }
      },
      getCurrentVolumeVillage(volumeID) { //根据所属册号选中小区
        const self = this;

        if (volumeID == "") {
          //显示全部小区
          self.userAddrList = self.userAddrListCopy;
          self.userAddrListDisabled = false;
          return false;
        }

        //显示对应的小区
        var items = self.volumeList.filter((val, index) => val.volumeID == volumeID)
        if (items[0]) {
          self.userAddrListDisabled = true
          self.userForm.villageID = items[0].villageID;
        }

      },
      getVolumeByVillage(villageID) { //根据小区显示册号列表
        const self = this;
        if (villageID == "") {
          //显示全部册号
          self.volumeList = self.volumeListCopy;
          return false;
        }
        //显示对应的册号
        self.volumeList = self.volumeListCopy.filter((val, index) => val.villageID == villageID)

        // var param = {
        //   villageID: villageID
        // }
        // self.$axios.post("/service/bsVolumeGet", param).then(res => {
        //   if (res.data.status === "success") {
        //     var tmp = res.data.res;
        //     //册号
        //     self.volumeList = tmp
        //   } else {
        //     self.$message(res.data.res);
        //   }
        // });

      }






    }
  }
</script>
<style lang="scss" scoped>
  .detailInfo {
    line-height: 24px;
    padding: 10px;

    label {
      color: #666;
    }
  }

  .form_div {
    max-width: 1200px;
    margin: 0px auto;
  }
</style>